<template>
  <div class="register-page">
    <div class="register-container">
      <div class="form-container">
        <div class="logo-section">
          <h1>创建您的游戏账户</h1>
          <p class="subtitle">加入狐大游戏平台，开启精彩游戏之旅</p>
        </div>
        
        <form @submit.prevent="handleRegister" class="form-base">
          <div class="form-group">
            <label for="email" class="form-label">邮箱地址</label>
            <div class="input-wrapper">
              <i class="icon">📧</i>
              <input 
                type="email" 
                id="email" 
                v-model="email" 
                placeholder="请输入您的邮箱地址"
                required
                class="form-input"
              >
            </div>
          </div>
          
          <div class="form-group">
            <label for="password" class="form-label">设置密码</label>
            <div class="input-wrapper">
              <i class="icon">🔒</i>
              <input 
                :type="showPassword ? 'text' : 'password'" 
                id="password" 
                v-model="password" 
                placeholder="请设置您的密码"
                required
                class="form-input"
              >
              <button 
                type="button" 
                class="password-toggle"
                @click="showPassword = !showPassword"
              >
                {{ showPassword ? '👁️' : '🙈' }}
              </button>
            </div>
          </div>
          
          <div class="form-group">
            <label for="confirmPassword" class="form-label">确认密码</label>
            <div class="input-wrapper">
              <i class="icon">🔒</i>
              <input 
                :type="showConfirmPassword ? 'text' : 'password'" 
                id="confirmPassword" 
                v-model="confirmPassword" 
                placeholder="请再次输入密码"
                required
                class="form-input"
              >
              <button 
                type="button" 
                class="password-toggle"
                @click="showConfirmPassword = !showConfirmPassword"
              >
                {{ showConfirmPassword ? '👁️' : '🙈' }}
              </button>
            </div>
          </div>
          
          <div class="form-options">
            <label class="checkbox-wrapper">
              <input type="checkbox" v-model="agreeTerms" class="checkbox" required>
              <span class="checkmark"></span>
              我已阅读并同意 <a href="#" class="terms-link">《用户服务协议》</a> 和 <a href="#" class="terms-link">《隐私政策》</a>
            </label>
          </div>
          
          <button type="submit" class="register-btn" :disabled="!agreeTerms">
            <span v-if="!isLoading">立即注册</span>
            <span v-else class="loading">注册中...</span>
          </button>
        </form>
        
        <div class="divider">
          <span>已有账户？</span>
        </div>
        
        <button @click="goToLogin" class="login-link-btn">
          立即登录游戏账户
        </button>
      </div>
      
      <div class="image-container">
        <div class="welcome-text">
          <h2>加入游戏大家庭</h2>
          <p>注册即可享受：</p>
          <div class="features">
            <div class="feature-item">
              <span class="feature-icon">🎮</span>
              <span>海量游戏资源</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">🏆</span>
              <span>竞技排行榜</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">💰</span>
              <span>大量游戏优惠</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">👥</span>
              <span>游戏社区交流</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">🎁</span>
              <span>新用户专享礼包</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreeTerms = ref(false)
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const isLoading = ref(false)
const router = useRouter()

const handleRegister = async () => {
  if (!agreeTerms.value) {
    alert('请先同意用户服务协议和隐私政策')
    return
  }
  if (password.value !== confirmPassword.value) {
    alert('两次输入的密码不一致')
    return
  }
  isLoading.value = true
  try {
    const response = await fetch('http://localhost:8080/hou/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email: email.value, password: password.value })
    })
    const result = await response.json()
    if (result.code === 0) {
      alert('注册成功，请登录！')
      router.push('/login')
    } else {
      alert(result.message || '注册失败')
    }
  } catch (e) {
    alert('注册请求失败')
  } finally {
    isLoading.value = false
  }
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style>
@import '@/assets/css/register.css';
</style>
 